<html>

<style>
    * {
        margin: 0;
    }

    #content {
        position: absolute;
        color: white;
        border: 1px solid rgb(71, 71, 71);
        padding: 20px;
        font-size: 14px;
    }
</style>

<script type="importmap">
	{
	  "imports": {
		"three": "../../three.js-r151/build/three.module.js",
		"three/addons/": "../../three.js-r151/examples/jsm/"
	  }
	}
</script>

<body>
    <div id="content">
        打印几何体的相关信息：1. position; 2. index <br/>
        三角形越多，表面越光滑，但是多了可能会影响性能哦
    </div>
    <div id="canvas"></div>

    <script type="module">
        import * as THREE from 'three';
        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

        // 1. 创建三大件
        // 1.1 三维场景Scene, 类似创建了个世界，三维世界
        const scene = new THREE.Scene();
        // const geometry = new THREE.BoxGeometry(1, 1, 1);
        const geometry = new THREE.PlaneGeometry(6, 3); //矩形平面几何体
        const material = new THREE.PointsMaterial({ color: 'yellow' });
        const cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

        // 添加辅助坐标系
        const axesHelper = new THREE.AxesHelper(10);
        scene.add(axesHelper);

        // 1.2 相机
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.set(5, 5, 5)

        // 1.3 渲染器
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        let canvasDom = document.getElementById("canvas");
        canvasDom.appendChild(renderer.domElement);

        // 设置相机控件轨道控制器OrbitControls
        const controls = new OrbitControls(camera, canvasDom);
        // 如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景
        controls.addEventListener('change', function () {
            renderer.render(scene, camera); //执行渲染操作
        });//监听鼠标、键盘事件


        // 2. 打印相关信息
        console.log('几何体', geometry);
        console.log('顶点位置数据', geometry.attributes.position);
        console.log('顶点索引数据? 顶点逆时针旋转？', geometry.index);

        // 第三个参数是列，第四个参数是行；
        const geometry1 = new THREE.PlaneGeometry(6, 3, 2, 1); 
        const material1 = new THREE.PointsMaterial({ color: 'purple', size: 0.2 });
        const cube1 = new THREE.Points(geometry1, material1);
        cube1.position.z = 2
        scene.add(cube1);
        console.log('几何体1', geometry1);
        console.log('顶点位置数据1', geometry1.attributes.position);
        console.log('顶点索引数据1? 顶点逆时针旋转？', geometry1.index);

        // 如果球体细分数比较低，表面就不会那么光滑。
        const material3 = new THREE.LineBasicMaterial({
            color: "white" //线条颜色
        });
        const geometry3 = new THREE.SphereGeometry( 1, 8, 6 );
        const cube3 = new THREE.Line(geometry3, material3);
        cube3.position.z = 4
        scene.add(cube3);

        renderer.render(scene, camera);
    </script>
</body>

</html>